<template>
  <view class="comments">
    <view :class="['comments__title', { loading }]">
      <view class="comments__title-line left" />
      <text>精彩评论</text>
      <view class="comments__title-line right" />
    </view>

    <view class="comments__list">
      <template v-if="datas.length > 0">
        <!-- 评论内容 -->
        <view v-for="item in datas" :key="item.id" class="comments__item">
          <skeleton
            title
            avatar
            avatar-size="30px"
            animate
            :row="3"
            :loading="loading"
            comp-style="display: flex;text-align: left;"
            style="display: flex; text-align: left; width: 100%"
          >
            <Avatar
              class="comments__avatar"
              size="60rpx"
              round
              :src="item.avatar"
              @click="handleCommentClick(item)"
            />
            <view class="comments__user">
              <text>{{ item.username }}</text>
              <text>{{ item.create_time }}</text>
              <view
                :class="['comments__op', { active: item.is_like }]"
                @click="handleZan(item)"
              >
                <text class="iconfont icon-zan1"></text>
                <text class="comments__zan-num">{{ item.like_num }}</text>
              </view>
              <text
                class="comments__content"
                @click="handleCommentClick(item)"
                >{{ item.content }}</text
              >
            </view>
          </skeleton>
        </view>
        <!-- 查看更多 -->
        <view v-if="hasMore" class="comments__more" @click="handleClickMore">
          查看更多
          <text class="iconfont icon-down" />
        </view>
      </template>
      <template v-else>
        <!-- 暂无评论 -->
        <no-data
          text="暂无评论，快去抢沙发"
          :style="{ 'margin-bottom': '20px' }"
        >
          <text class="iconfont icon-zanwupinglun"></text>
        </no-data>
      </template>
    </view>
    <!-- 发表评论 -->
    <view class="comments__form">
      <Avatar class="comments__avatar" size="60rpx" round :src="avatar" />
      <div class="comments__form-right">
        <textarea
          placeholder-style="font-size: 14px;"
          auto-height
          class="comments__form-input"
          :value="content"
          :focus="inputFocus"
          :placeholder="placeholderStr"
          @input="handleCommentChange"
          @blur="handleCommentBlur"
        />
      </div>
      <text class="comments__form-submit" @click="submitComment">发表</text>
    </view>
  </view>
</template>

<script>
import NoData from '@/components/NoData';
import { formatDateToNormalStr, setPageTitle } from '@/utils';
import { mapState } from 'vuex';
import Avatar from '@/components/Avatar';

export default {
  components: {
    NoData,
    Avatar,
  },

  computed: {
    ...mapState({
      avatar: (state) => state.app.userInfo.avatar,
    }),
  },

  data() {
    return {
      datas: [1, 2, 3, 4, 5, 6, 7, 8],
      loading: true,
      page: 1,
      hasMore: false,
      content: '',
      inputFocus: false,
      placeholderStr: '发表评论..',
    };
  },

  methods: {
    fetchComments() {
      this.$http({
        method: 'GET',
        url: '/api/front/comment/detail',
        data: {
          bookid: this.bookid,
          page: this.page,
        },
        needAuth: true,
        skipToast: false,
        errorText: '获取评论数据失败',
      }).then((res) => {
        if (res.ok && res.list) {
          if (this.page > 1) {
            this.datas = [...this.datas, ...res.list].map((item) => {
              item.create_time = formatDateToNormalStr(
                new Date(item.create_time)
              );
              return item;
            });
          } else {
            this.datas = res.list.map((item) => {
              item.create_time = formatDateToNormalStr(
                new Date(item.create_time)
              );
              return item;
            });
          }
          this.loading = false;
          this.hasMore = !!res.hasMore;
          // 设置页面标题
          setPageTitle(res.bookName || '更多书评');
        }
      });
    },

    handleZan(item) {
      this.$http({
        method: 'GET',
        url: '/api/front/comment/like',
        data: {
          commentid: item.id,
          op: item.is_like ? 'remove' : 'add',
        },
        needAuth: true,
        skipToast: false,
        errorText: '点赞失败',
      }).then((res) => {
        if (res.ok) {
          !item.is_like && this.$store.commit('showSuccessTips', '点赞成功');
          this.datas = this.datas.map((comment) => {
            if (comment.id === item.id) {
              if (item.is_like) {
                comment.like_num -= 1;
                comment.is_like = false;
              } else {
                comment.like_num += 1;
                comment.is_like = true;
              }
            }
            return comment;
          });
        }
      });
    },

    handleClickMore() {
      // 下一页
      this.page = this.page + 1;
      this.fetchComments();
    },

    handleCommentClick(item) {
      this.inputFocus = true;
      this.placeholderStr = `回复${item.username}`;
      this.father = {
        userid: item.userid,
        avatar: item.avatar,
        username: item.username,
      };
    },

    handleCommentBlur(event) {
      this.inputFocus = false;
      if (!event.detail.value) {
        this.placeholderStr = '发表评论..';
        this.father = null;
      }
    },

    handleCommentChange(event) {
      this.content = event.detail.value;
    },

    submitComment() {
      if (!this.content) {
        uni.showToast({ title: '请输入评论内容', icon: 'none' });
        return;
      }
      this.$http({
        method: 'POST',
        url: '/api/front/comment/add',
        data: {
          bookid: this.bookid,
          ...{ father: this.father },
          content: this.content,
        },
        needAuth: true,
        skipToast: false,
        errorText: '发表评论失败',
      }).then((res) => {
        if (res.ok) {
          this.$store.commit('showSuccessTips', '发表评论成功');
          this.content = '';
          this.fetchComments();

          // 还原回复状态
          if (this.father) {
            this.placeholderStr = '发表评论..';
            this.father = null;
          }
        }
      });
    },
  },

  onLoad(options) {
    this.bookid = options.id;
    this.fetchComments();
  },
};
</script>

<style lang="scss">
.comments {
  padding: 40rpx 0 40rpx;
  background: #fff;
  text-align: center;
  margin-top: 16rpx;

  &__title {
    margin-bottom: 30rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    &.loading {
      text {
        color: $font-color-ccc;
      }

      .comments__title-line {
        background: $font-color-ccc;
      }
    }

    text {
      color: $font-color-dark;
      font-size: 30rpx;
    }

    &-line {
      width: 120rpx;
      height: 2rpx;
      background: $font-color-light;

      &.left {
        margin-right: 20rpx;
      }

      &.right {
        margin-left: 20rpx;
      }
    }
  }

  &__list {
    position: relative;
  }

  &__item {
    display: flex;
    text-align: left;
    padding: 20rpx 30rpx;

    & > image {
      width: 60rpx;
      height: 60rpx;
      border-radius: 100rpx;
      flex-shrink: 0;
      margin-right: 24rpx;
    }
  }

  &__avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 100rpx;
    flex-shrink: 0;
    margin-right: 24rpx;
  }

  &__user {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: $font-sm + 2rpx;
    color: $font-color-light;
    position: relative;
  }

  &__content {
    font-size: $font-base;
    color: #555;
    padding-top: 20rpx;
  }

  &__more {
    padding: 80rpx 30rpx 40rpx 30rpx;
    font-size: $font-base;
    color: $font-color-normal;
    margin-bottom: 8rpx;
    border-radius: 6rpx;
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, #fff 30%);
  }

  &__op {
    position: absolute;
    right: 0;
    top: 0;
    color: $font-color-desc;

    &.active {
      color: $page-main-color;
    }

    .iconfont {
      padding: 8rpx;
    }
  }

  &__zan-num {
    font-size: 24rpx;
  }

  .icon-zanwupinglun {
    font-size: 120rpx;
  }

  &__form {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 10rpx 0 30rpx;
    margin-top: 20rpx;

    &-right {
      flex: 1;
      margin-left: 20rpx;
    }

    &-input {
      width: 100%;
      color: $font-color-dark;
      border: 2rpx solid $border-color-gray;
      border-radius: 8rpx;
      min-height: 32rpx;
      text-align: left;
      padding: 10rpx 12rpx;
      font-size: 28rpx;
      line-height: 40rpx;
    }

    &-submit {
      font-size: 28rpx;
      color: #4399fc;
      line-height: 60rpx;
      padding: 0 20rpx;
      margin-left: 20rpx;
      border-radius: 8rpx;

      &:active {
        background: #efefef;
      }
    }
  }
}
</style>
